<template>
  <view>
    <view class="order-list" v-if="Object.keys(serviceInfo).length > 0">
      <view class="order-status-title">{{ serviceInfo.status }}</view>
      <view class="order-card">
        <view class="service-item-title bor-bot">
          <view class="service-item-title-content">{{
            serviceInfo.serverValue
          }}</view>
          <view class="service-item-price">￥{{ serviceInfo.specialOfferPrice }}元/天</view>
          <view class="service-item-count">x{{ serviceInfo.dayCounts }}</view>
          <view class="service-item-total">实付：￥{{ serviceInfo.orderAmout }}</view>
        </view>
        <view class="discount-price bor-bot">
          <view class="discount-title">优惠：-￥{{ priceSpread }}</view>
        </view>
        <view class="service-cycle bor-bot" style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
          ">
          <view class="cycle-icon">服务周期</view>
          <view style="width: 100%">{{ serviceInfo.serverStart }} -- {{ serviceInfo.serverEnd }}</view>
        </view>
        <view v-if="serviceInfo.categoryObject != 24 && serverCycle != ''" class="service-cycle bor-bot" style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
            padding: 15rpx 0;
          ">
          <view class="cycle-icon" style="margin-bottom: 10rpx">服务时段</view>
          <view class="radio-container" style="width: 100%">
            <view v-for="(item, index) in timeOptions" :key="index" class="time-option"
              :class="{ selected: serverCycle === item.value }" @tap="onChange(item.value)">
              {{ item.label }}
            </view>
          </view>
        </view>
        <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">被护理人</view>
          <view class="client-info" @click="toPatientList">
            <view class="info" v-if="Object.keys(patientInfo).length > 0">
              <view class="info-title">
                <view class="info-icon">被护理人信息</view>
              </view>
              <view class="patient-info">
                <view class="patien-item">姓名：{{ patientInfo.patientName }}</view>
                <view class="patien-item">性别：{{ patientInfo.patientSex }}</view>
                <view class="patien-item">年龄：{{ patientInfo.patientAge }}</view>
              </view>
              <view class="patient-info">
                <view class="patien-item">
                  基本信息：
                  <span class="patien-content">{{
                    patientInfo.patientMedical
                  }}</span>
                  <span class="patien-content">{{
                    patientInfo.patientPdiagnose
                  }}</span>
                </view>
              </view>
              <view class="info-title">
                <view class="info-icon">联系人</view>
              </view>
              <view class="patient-info">
                <view class="patien-item">姓名：{{ patientInfo.createUser }}</view>
                <view class="patien-item">电话：{{ patientInfo.patientPhone }}</view>
              </view>
            </view>
            <view class="info" v-else>选择被护理人</view>
            <view class="arrow">></view>
          </view>
        </view>
        <!-- <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">护工</view>
          <view class="client-info" @click="toWorkerList">
            <view class="info" v-if="Object.keys(workerInfo).length > 0">
              <view class="info-title">
                <view class="info-icon">护工信息</view>
              </view>
              <view class="patient-info">
                <view class="patien-item"
                  >姓名：{{ workerInfo.nurseName }}</view
                >
                <view class="patien-item">性别：{{ workerInfo.nurseSex }}</view>
                <view class="patien-item">年龄：{{ workerInfo.nurseAge }}</view>
              </view>
              <view class="patient-info">
                <view class="patien-item">
                  联系电话：
                  <span class="patien-content">{{
                    workerInfo.nursePhone
                  }}</span>
                </view>
                <view class="patien-item">
                  技能：
                  <span class="patien-content">{{
                    workerInfo.nurseSkill
                  }}</span>
                </view>
              </view>
            </view>
            <view class="info" v-else style="padding: 15rpx 0; color: #c1c1c1"
              >选择护工</view
            >
            <view class="arrow">></view>
          </view>
        </view> -->
        <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">护工性别</view>
          <view class="client-info" @click="chooseSex">
            <view class="info" v-if="serviceInfo.nurseSex">
              {{ serviceInfo.nurseSex }}
            </view>
            <view class="info" v-else style="padding: 15rpx 0; color: #c1c1c1">选择护工性别</view>
            <view class="arrow">></view>
          </view>
        </view>
        <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">订单信息</view>
          <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
            订单编号：
            <view style="display: inline-block">
              {{ serviceInfo.orderNumber }}
            </view>
            <view class="copy-btn" @click="copy(serviceInfo.orderNumber)">复制</view>
          </view>
          <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
            下单时间：
            <view style="display: inline-block">
              {{ serviceInfo.createTime }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-fixed-view" v-if="orderState == 0">
      <view class="pay-view">
        <view class="pay-btn" style="width: 100%" @click="handleSubmit(1)">
          <view style="display: flex; justify-content: center; align-items: center">
            <view>确定</view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="bottom-fixed-view" v-if="orderState == 4">
      <view class="pay-view">
        <view
          class="pay-btn"
          style="width: 100%; background-color: #f22e0c"
          @click="endOrderHandle"
        >
          <view
            style="display: flex; justify-content: center; align-items: center"
          >
            <view>结束服务</view>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 选择性别 -->
    <u-action-sheet :show="showSex" :actions="actions" @close="showSex = false" @select="sexSelect"></u-action-sheet>
  </view>
</template>

<script>
import { mapGetters } from "vuex"
import PageInfo from "../../utils/pageutils.js"
import cnMoney from "../../components/cn-money/cn-money"
import * as wxPay from "../../common/api/wxPay.js"
import {
  getNurseServe,
  saveOrder,
  getServiceById,
  orderDetail,
  endOrder,
} from "../../common/api/index.js"
export default {
  props: {
    isInIndex: false,
  },
  components: {
    cnMoney,
  },
  data() {
    return {
      pickerShowByDay: false, //是否日期选择控件
      maxDay: 60, //最大跨度日
      startDay: "",
      endDay: "",
      current: 0,
      status: "",
      orderStatus: "全部", //支付状态
      status: "", //状态
      readForm: {},
      bannerList: ["https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/banner_01.png"], //轮播图
      indicatorDots: false,
      range: "",
      totalMoney: "222",
      radioSelected: false,
      list: [],
      listOne: [],
      listTwo: [],
      serverId: "",
      code: "",
      allData: [],
      patientInfo: {},
      editFlag: false,
      isUpdate: false,
      orderId: "",
      orderAmout: null,
      orderState: "",
      datetimerange: [],
      showDoc: true,
      showTime1: false,
      showTime: false,
      isOpen: false,
      serviceInfo: {},
      totalPrice: 0,
      originalPrice: 0,
      priceSpread: "0.00",
      dayCounts: 0,
      serverCycle: "", // 存储选中的时间值
      timeOptions: [
        { label: "8时-17时", value: "morning" },
        { label: "9时-18时", value: "noon" },
        { label: "10时-19时", value: "night " },
      ],
      actions: [
        //性别选择
        {
          name: "男",
        },
        {
          name: "女",
        },
      ],
      showSex: false,
      workerInfo: {},
    }
  },
  computed: {
    ...mapGetters({
      pageInfo: "page/pageInfo",
    }),
  },
  mounted() { },
  onShow() {
    if (this.pageInfo?.choosePatient) {
      this.patientInfo = this.pageInfo.choosePatientInfo
      this.$nextTick(() => {
        this.$store.commit("page/setPageInfo", {})
      })
    }
    // if (this.pageInfo?.chooseWorker) {
    //   this.workerInfo = this.pageInfo.chooseWorkerInfo;
    //   this.$nextTick(() => {
    //     this.$store.commit("page/setPageInfo", {});
    //   });
    // }
  },
  onLoad(opt) {
    console.log("opt", opt)
    // 编辑
    if (opt.isUpdate) {
      this.orderId = opt.orderId
      this.isUpdate = opt.isUpdate
      this.getOrderDetailById()
    }
  },
  methods: {
    chooseSex() {
      this.showSex = true
    },
    // 订单详情
    async getOrderDetailById() {
      let that = this
      orderDetail({ orderId: that.orderId }).then((res) => {
        console.log("res", res)
        if (res.data.code == 200) {
          that.serviceInfo = res.data.data
          that.orderState = res.data.data.orderState
          // 基础信息回显
          that.patientInfo = that.serviceInfo.nursePatient
          // that.workerInfo = that.serviceInfo.nurseInfo;

          that.serviceInfo.dayCounts = that.calculateDaysBetweenTimestamps(
            Date.parse(that.serviceInfo.serverStart),
            Date.parse(that.serviceInfo.serverEnd)
          )
          that.serverCycle = that.serviceInfo.serverCycle
          that.orderState = that.serviceInfo.orderState
          this.priceSpread = (
            Number(that.serviceInfo.specialOfferPrice) *
            Number(that.serviceInfo.dayCounts) -
            Number(that.serviceInfo.orderAmout)
          ).toFixed(2)
        }
      })
    },
    // 结束订单
    endOrderHandle() {
      let that = this
      uni.showModal({
        title: "提示",
        content: "确定结束？",
        showCancel: true,
        cancelText: "取消",
        confirmText: "确定",
        success: function (res) {
          if (res.confirm) {
            endOrder({ orderId: that.serviceInfo.orderId })
              .then((result) => {
                if (result.data.code == 200) {
                  uni.showToast({
                    icon: "success",
                    title: result.data.msg,
                  })
                }
              })
              .finally(() => {
                that.getOrderDetailById()
              })
          }
        },
      })
    },
    // 选人
    toPatientList() {
      if (this.orderState == 0) {
        uni.navigateTo({
          url: "/nursingWorkerPages/pages/patientList/patientList",
        })
      }
    },
    toWorkerList() {
      uni.navigateTo({
        url: "/nursingWorkerPages/pages/nursingWorker/nursingWorker",
      })
    },
    handleSubmit() {
      this.addAndPay()
    },
    // 复制订单号
    copy(value) {
      console.log("value", value)
      uni.setClipboardData({
        data: value,
        success: function () {
          console.log("success")
          uni.showToast({
            title: "复制成功",
            icon: "success",
            duration: 2000,
          })
        },
        fail: (error) => {
          console.log("失败", error)
          uni.showToast({
            title: "复制失败",
            icon: "none",
          })
        },
      })
    },
    calculateDaysBetweenTimestamps(timestamp1, timestamp2) {
      if (timestamp1 && timestamp2) {
        const startDate = new Date(timestamp1)
        const endDate = new Date(timestamp2)
        startDate.setHours(0, 0, 0, 0)
        endDate.setHours(0, 0, 0, 0)

        if (endDate.getTime() == startDate.getTime()) {
          return 1
        }
        if (startDate < endDate) {
          const timeDifference = endDate.getTime() - startDate.getTime()
          const daysDifference = Math.floor(
            timeDifference / (1000 * 60 * 60 * 24)
          )
          // 四舍五入到最近的整数
          // daysDifference = Math.round(daysDifference);

          return daysDifference + 1
        }
        if (startDate > endDate) {
          uni.showToast({
            title: "时间范围不正确！",
            icon: "none",
          })
          return 0
        }
      } else {
        return 0
      }
    },
    pay(result) {
      console.log("result", result)
      const data = result
      const orderInfo = {
        appid: data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
        nonceStr: data.nonceStr, // 随机字符串
        package: data.package, // 固定值
        timeStamp: data.timeStamp, // 时间戳（单位：秒）
        paySign: data.paySign, // 签名，这里用的 MD5/RSA 签名
        signType: data.signType,
      }
      console.log("orderInfo", orderInfo)
      uni.requestPayment({
        provider: "wxpay",
        ...orderInfo,
        success(res) {
          console.log("支付成功", res)
          uni.showToast({
            icon: "success",
            title: "支付成功",
            complete() {
              setTimeout(() => {
                uni.navigateBack()
              }, 2000)
            },
          })
        },
        fail(err) {
          console.log("支付失败", err)

          uni.showToast({
            icon: "none",
            title: "支付失败",
            complete() { },
          })
        },
      })
    },
    checkFormAdd() {
      console.log("添加检查", this.patientInfo)
      let msg = ""
      const showMsg = () => {
        if (msg) {
          uni.showToast({
            title: msg,
            icon: "none",
          })
        }
      }
      if (!this.patientInfo.patientId) {
        msg = "被护理人信息不能为空"
        showMsg()
        return false
      }
      if (this.serviceInfo.categoryObject != 24) {
        if (!this.serverCycle) {
          msg = "服务时段不能为空"
          showMsg()
          return false
        }
      }
      return true
    },
    sexSelect(e) {
      this.serviceInfo.nurseSex = e.name
    },
    // 添加并支付
    addAndPay() {
      this.orderAmout = this.list.filter((item) => {
        return item.serverId == this.serverId
      })
      if (!this.checkFormAdd()) {
        return
      }

      let params = {
        orderCategory: this.serviceInfo.orderCategory,
        orderServer: this.serviceInfo.orderServer,
        orderAmout: this.serviceInfo.orderAmout,
        nursePatientId: this.patientInfo.patientId,
        nurseUserId: this.patientInfo.patientUserId,
        serverStart: this.serviceInfo.serverStart,
        serverEnd: this.serviceInfo.serverEnd,
        orderId: this.serviceInfo.orderId,
        serverCycle: this.serverCycle,
        nurseSex: this.serviceInfo.nurseSex,
        nurseId: this.workerInfo.nurseId,
      }
      params.isFlag = 1
      params.openId = uni.getStorageSync("openid_key")
      console.log("params", params)
      saveOrder(params)
        .then((res) => {
          if (res.data.code == 200) {
            // this.pay(res.data.data);
            uni.showToast({
              icon: "success",
              title: res.data.msg,
            })
            setTimeout(() => {
              uni.setStorageSync("nav_to_nurse_index", 1)
              uni.reLaunch({ url: "/nursingWorkerPages/pages/index/index" })
            }, 1500)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    onChange(value) {
      if (this.orderState == 0) {
        this.serverCycle = value
      }
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.top-tab-bar {
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, 150rpx);
  grid-template-rows: repeat(auto-fit, 66rpx);
  grid-column-gap: 20rpx;
  grid-row-gap: 26rpx;
  background: #f9f9f9;

  // position: sticky;
  // top: 0;
  // z-index: 2;
  .tab-item {
    width: 150rpx;
    height: 66rpx;
    background: #f1f1f1;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(35, 35, 35, 0.8);
    font-size: 26rpx;
  }

  .tab-item-selected {
    background: #dff0ef;
    color: #0bc5ae;
  }
}

.order-card {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .title-and-status {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .title-left {
      display: flex;
      justify-content: flex-start;
      width: 70%;
      align-items: flex-end;

      .title-main {
        color: #333333;
        font-size: 35rpx;
        font-weight: 700;
        margin-right: 10rpx;
      }

      .subhead {
        color: #747474;
        font-size: 28rpx;
      }
    }

    .time {
      flex: 1;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .status {
      font-size: 30rpx;
      font-weight: 700;
      color: #333333;

      .status-price {
        color: #ffb35b;
      }
    }
  }

  .item-tag {
    display: flex;
    justify-content: flex-start;
    // width: 80%;
    align-items: center;
    margin-top: 20rpx;
    flex-wrap: wrap;
    min-height: 130rpx;

    .service-tag {
      min-width: 110rpx;
      background-color: #eafaf5;
      font-size: 20rpx;
      color: #6f7070;
      padding: 10rpx;
      height: 50rpx;
      line-height: 30rpx;
      text-align: center;
      border-radius: 25rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  .cycle-and-price {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    color: #6c6c6c;
    margin-top: 10rpx;

    .cycle {
      width: 80%;
    }
  }

  .project-row {
    display: flex;
    align-items: center;
    margin-top: 36rpx;

    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 24rpx;
    }
  }

  .info-row {
    display: flex;
    margin-top: 40rpx;

    .name {
      width: 136rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .value {
      color: #232323;
      font-size: 26rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .price-and-pay {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .cancel-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx rgba(35, 35, 35, 0.26);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }

    .ok-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx #0bc5ae;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0bc5ae;
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}

.del-btn {
  width: 60rpx;
  height: 40rpx;
  border: solid 2rpx #c5070a;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5070a;
  font-size: 14rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.service-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.service-btn .my-btn:not(:last-child) {
  margin-right: 10rpx;
}

.my-btn {
  min-width: 140rpx;
  height: 58rpx;
  line-height: 58rpx;
  border: 1rpx solid #d0d0d0;
  border-radius: 40rpx;
  color: #787878;
  text-align: center;
}

.btn-green {
  border-color: #04bdb3;
  color: #04bdb3;
}

.service-cycle {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;

  .cycle-icon {
    width: 200rpx;
    height: 50rpx;
    line-height: 50rpx;
    // padding-left: 50rpx;
    // background: url(/nursingWorkerPages/static/shijian.png) no-repeat left center;
    background-size: 40rpx 40rpx;
    font-weight: 700;
    font-size: 30rpx;
  }

  .cycle-date {
    width: 70%;
    font-size: 30rpx;
  }
}

::v-deep.uni-icons {
  display: none !important;
}

.client-info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  .info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;

    .patient-info {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      align-items: center;
      color: #adadad;

      .patien-item {
        margin: 10rpx 40rpx 10rpx 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .patien-content {
          display: inline-block;
          max-width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .info-title {
      font-size: 30rpx;
      font-weight: 700;

      .info-icon {
        width: 250rpx;
        height: 50rpx;
        line-height: 50rpx;
        padding-left: 50rpx;
        background: url(/nursingWorkerPages/static/lianxiren.png) no-repeat left center;
        background-size: 40rpx 40rpx;
        font-weight: 700;
        font-size: 30rpx;
      }
    }
  }
}

.arrow {
  width: 10%;
  color: #cdcdcd;
}

.bottom-fixed-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  border-top-left-radius: 30rpx;
  border-top-left-radius: 30rpx;
  padding-bottom: 30rpx;

  .agreement-view {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    border-bottom: solid 2rpx #f2f2f2;

    .text {
      color: rgba(35, 35, 35, 0.5);
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .agreement {
        color: #6279f9;
      }
    }

    .item {
      color: #0bc5ae;
    }
  }

  .pay-view {
    width: 100%;
    height: 116rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    box-sizing: border-box;
    color: #232323;
    font-size: 26rpx;
    mmargin-left: 10rpx;

    .show-details {
      flex: 1;
      margin-left: 28rpx;
      font-size: 24rpx;
      color: #0bc5ae;

      .icon {
        width: 24rpx;
        height: 24rpx;
      }
    }

    .pay-btn {
      // min-width: 260rpx;
      padding: 0 30rpx;
      height: 88rpx;
      // line-height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fc6804;
      // background: #ff0000;
      color: white;
      border-radius: 48rpx;
      font-size: 30rpx;
      // margin-left: 160rpx;
    }
  }
}

.select-button {
  width: 40rpx;
  height: 40rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }
}

.save {
  background: #fbb15c !important;
  margin-right: 10rpx;
}

::v-deep.uni-date-x {
  padding: 0 !important;
}

// 服务详情
.service-detail {
  font-weight: 700;
  font-size: 30rpx;
  margin: 30rpx;
  width: 100%;

  .title-right {
    font-weight: normal;
    margin-left: 20rpx;
  }
}

.d-s {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.service-box {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;

  .service-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 10rpx;
  }

  .left {
    color: #ababab;
    margin-right: 10rpx;
    width: 160rpx;
  }

  .right {
    text-align: left;
    display: inline-block;
    width: 100%;
  }

  .notice {
    margin: 20rpx 0;
    border-top: 1rpx solid #c7c7c7;

    .notice-title {
      font-weight: 700;
      padding: 10rpx 0;
    }

    .notice-content {
      font-size: 25rpx;
      color: #333;
      width: 100%;
      // white-space: pre-line;
      text-align: justify;
      line-height: 40rpx;
    }
  }
}

.service-container {
  .title {
    border: 1rpx solid #c7c7c7;
    padding: 10rpx;
    text-align: center;
    margin-bottom: 15rpx;
    font-weight: 700;
  }

  .service-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .service-item {
      width: 48%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .top image {
        width: 300rpx;
        height: 200rpx;
        border: 1rpx solid #c1c1c1;
      }

      .top-img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        border: 1rpx solid #333;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .bottom {
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // flex-direction: column;

        min-height: 150rpx;

        .name {
          text-align: center;
          font-weight: 700;
          font-style: 20rpx;
          height: 50rpx;
        }

        .content {
          font-size: 25rpx;
          background-color: #f5f3f3;
          padding: 10rpx;
        }
      }
    }
  }
}

.service-border {
  border: 1rpx solid #c1c1c1;
  border-radius: 10rpx;
  padding: 10rpx;
}

.instructions {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  margin-bottom: 230rpx;

  .instructions-item {
    padding: 10rpx;

    .top {
      color: #9e9e9e;
    }
  }
}

.container1 {
  display: flex;
  flex-direction: column;
}

.header {
  padding: 10px;
  // background-color: #f1f1f1;
  text-align: center;
  cursor: pointer;
}

.content1 {
  margin: 0 30rpx;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  max-height: 0;
  padding: 0 15rpx;

  .detail-title {
    font-weight: 700;
    font-size: 40rpx;
    text-align: center;
    padding: 15rpx 0;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e2e2e2;
    padding: 15rpx 30rpx;
  }
}

.content1.open {
  max-height: 500px;
  /* 这个值应该根据你的内容最大高度适当调整 */
}

// 顶部标题
.service-item-title {
  position: relative;
  margin-bottom: 15rpx;
  padding-bottom: 15rpx;

  .service-item-title-content {
    font-size: 40rpx;
    font-weight: 700;
    margin-bottom: 45rpx;
    white-space: normal;
    overflow-y: hidden;
    width: 500rpx;
  }

  .service-item-price {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5rpx;
    right: 0;
  }

  .service-item-count {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5rpx;
    left: 0;
    font-size: 30rpx;
  }

  .service-item-total {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5rpx;
    right: 0;
    font-size: 30rpx;
  }
}

.bor-bot {
  border-bottom: 1rpx solid #ececec;
}

// 单选框
.radio-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: center;

  .time-option {
    padding: 10rpx;
    // margin-bottom: 10rpx;
    border-radius: 5rpx;
    text-align: center;
    transition: background-color 0.3s;
    background-color: #f1f1f1;
    margin-right: 15rpx;
    border-radius: 10rpx;

    &.selected {
      background-color: #fd6802;
      color: #fff; // 文字颜色可以根据需要调整
    }
  }
}

// 订单状态
.order-status-title {
  font-size: 35rpx;
  text-align: left;
  font-weight: 700;
  padding: 20rpx 60rpx;
}

.copy-btn {
  width: 100rpx;
  border-radius: 50rpx;
  border: 1rpx solid #ececec;
  text-align-last: center;
  padding: 0 5rpx;
  display: inline-block;
  margin-left: 10rpx;
}

.discount-price {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15rpx 0;
}
</style>
